<template>
  <div class="carttable">
    <table>
      <thead>
        <th>
          <span
            ><input
              type="checkbox"
              name=""
              id=""
              :checked="fullState"
              @click="setCheckAll"
            />全选</span
          >
        </th>
        <th>图片</th>
        <th>详情</th>
        <th>尺寸</th>
        <th>
          <span>单价：</span>
        </th>
        <th>
          <span>共选中：</span>
        </th>
      </thead>
      <tbody>
        <tr v-for="(product,index) in datas" :key="product.shopcart_goods_id">
          <td>
            <input
              type="checkbox"
              name=""
              id=""
              :checked="product.checked"
              @click="total(product)"
            />
          </td>
          <td>
            <img
              :src="product.shopcart_goods_img"
              alt=""
              style="width: 80px; height: 80px"
            />
          </td>
          <td>
            <p>{{ product.shopcart_goods_title }}</p>
          </td>
          <td>
            <p>{{ product.shopcart_goods_size }}</p>
          </td>

          <td>
            <span>￥{{ product.shopcart_goods_price }}元</span>
          </td>
          <td>
            <img
              src="../assets/减少 (1).png"
              alt=""
              class="reduce"
              @click="reduce(product)"
            />
            <span>数量:{{ product.shopcart_count }}</span>
            <img
              src="../assets/增加.png"
              alt=""
              class="add"
              @click="add(product)"
            />
          </td>
          <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
            <span>{{ Message }}</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="delProduct(product,index)"
                >确 定</el-button
              >
            </span>
          </el-dialog>
        </tr>
      </tbody>
    </table>
    <el-empty
      description="还没有添加商品哦亲，快挑选一件心仪的商品吧"
      v-show="datas.length == 0"
    ></el-empty>
  </div>
</template>

<script>
import pubsub from "pubsub-js";
export default {
  name: "CartTable",
  data() {
    return {
      datas: [],
      user_id: "",
      dialogVisible: false,
      Message: "是否确认删除该商品",
      delState:1
    };
  },
  computed: {
    //监控当前购物车所有数据的选中状态，一旦数据源中选中状态改变，立即响应执行
    fullState() {
      return this.datas.every((item) => item.checked);
    },
  },
  methods: {
    delProduct(product,index) {
      this.$axios
        .post("/api/users/delCartProduct", {
          user_id: localStorage.getItem("user_id"),
          shopcart_goodsID: product.shopcart_goodsID,
          shopcart_goods_size: product.shopcart_goods_size,
        })
        .then((res) => {
          this.dialogVisible = false;
          this.delState += 1
        }).then(()=>{
          this.datas.splice(index,1)
          this.$bus.$emit("passOnDelState",this.delState)
        })
        .catch((err) => {
          console.log(err);
        });
    },
    changedialogVisible() {
      this.dialogVisible = true;
    },
    reduce(product) {
      if (product.shopcart_count > 1) {
        product.shopcart_count -= 1;
      } else {
        this.changedialogVisible();
      }
      this.calculation();
      
    },
    add(product) {
      product.shopcart_count += 1;
      this.calculation();
    },
    total(product) {
      product.checked = !product.checked;
      this.calculation();
    },
    setCheckAll(e) {
      this.datas.forEach((item) => {
        item.checked = e.target.checked;
        return item;
      });
      this.calculation();
    },
    calculation() {
      let sum = 0;
      this.datas.forEach((item) => {
        if (item.checked == true) {
          sum += item.shopcart_goods_price * item.shopcart_count;
        }
      });
      pubsub.publish("bus1", sum);
      return sum;
    },
  },
  created() {
    this.user_id = localStorage.getItem("user_id");
    this.$axios
      .get("/api/product/viewShopCart", {
        params: {
          user_id: this.user_id,
        },
      })
      .then((res) => {
        this.datas = res.data.data;
      })
  },
  updated() {
    let results = [];
    this.datas.forEach((item) => {
      if (item.checked == true) {
        results.push(item);
      }
    });
    this.$emit("childFn", results);
  },
};
</script>

<style>
.el-empty {
  margin-left: 20px;
}
.reduce,
.add {
  width: 24px;
  cursor: pointer;
}
.carttable {
  margin-left: 150px;
}
.carttable table {
  width: 100%;
  margin: 0 auto;
  margin-top: 50px;
  border-collapse: collapse;
}
.carttable table thead {
  color: #ccc;
  margin-top: 20px;
  background-color: #f4f4f4;
}
.carttable table th {
  text-align: center;
  padding: 0 20px;
}
.carttable table th:nth-child(4) {
  width: 200px;
}
.carttable table tr {
  height: 90px;
  border-bottom: 1px solid #ababab;
  margin-bottom: 20px;
}
.carttable table td {
  text-align: center;
}
</style>